<template>
  <div class="elements-container" :class="{ 'fade-in': fadeIn }">
    <div class="content">
      <section class="hero">
        <div class="hero-text">
          <h1>信息工程学的五大要素</h1>
          <p>
            信息工程学的核心在于五大要素：生成、传递、收集、存储和处理。它们共同构成了信息社会的基石。
          </p>
        </div>
      </section>
      <div class="elements-grid">
        <element-item v-for="(element, index) in elements" :key="index" :element="element" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElPageHeader } from "element-plus";
import ElementItem from "../components/ElementItem.vue";
import { onMounted, ref } from "vue";

const elements = [
  {
    title: "信息的生成",
    description: "创造新的信息，如计算机绘图和数据挖掘。",
    detail:
      "信息的生成是信息工程学的起点，通过计算机图形学、数据挖掘等技术，从无到有地创造出新的信息。这些信息为后续的处理和应用提供了基础。"
  },
  {
    title: "信息的传递",
    description: "通过电信和通信技术，如互联网和移动通信，实现信息的快速传输。",
    detail:
      "信息的传递是信息工程学的关键环节，通过光纤通信、无线通信等技术，确保信息能够快速、准确地从一个地方传输到另一个地方。"
  },
  {
    title: "信息的收集",
    description: "利用搜索引擎、传感器和图像识别技术，从海量数据中提取有价值的信息。",
    detail:
      "信息的收集是信息工程学的重要组成部分，通过搜索引擎、传感器网络、图像识别等技术，从海量数据中提取有价值的信息，为数据分析和决策提供支持。"
  },
  {
    title: "信息的存储",
    description: "使用硬盘、云存储等技术，确保信息的安全和高效存储。",
    detail:
      "信息的存储是信息工程学的重要环节，通过硬盘存储、云存储等技术，确保信息的安全性和高效访问。这些技术为信息的长期保存提供了保障。"
  },
  {
    title: "信息的处理",
    description: "通过计算处理、信号处理和图像处理，将原始数据转化为有价值的信息。",
    detail:
      "信息的处理是信息工程学的核心环节，通过计算处理、信号处理、图像处理等技术，将原始数据转化为有价值的信息，为决策提供支持。"
  }
];

const fadeIn = ref(false);

onMounted(() => {
  setTimeout(() => {
    fadeIn.value = true;
  }, 100);
});
</script>

<style scoped>
.elements-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.elements-container.fade-in {
  opacity: 1;
}

.page-header {
  margin-bottom: 20px;
}

.content {
  text-align: center;
  padding: 20px;
}

.hero {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(64, 158, 255, 0.12), rgba(103, 194, 58, 0.1));
  border: 1px solid rgba(64, 158, 255, 0.2);
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

h1 {
  font-size: 28px;
  margin-bottom: 10px;
  color: #333;
}

p {
  font-size: 16px;
  line-height: 1.5;
  color: #666;
  margin-bottom: 20px;
}

.elements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

@media (max-width: 768px) {
  .elements-grid {
    grid-template-columns: 1fr;
  }
}
</style>